<template>
  <div style="height: 100%">
    <div class="log-search">
      <div class="log-search-operation">
        <div style="width: 300px;margin-right: 20px">
          <el-input
                  v-model="searchOption.deviceName"
                  placeholder="输入设备名称"
                  clearable
          ></el-input>
        </div>
        <div style="width: 300px;margin-right: 20px">
          <el-input
                  v-model="searchOption.deviceId"
                  placeholder="输入设备ID"
                  clearable
          ></el-input>
        </div>
        <el-button @click="resetSearch">重置</el-button>
        <el-button @click="page" type="primary">查询</el-button>
      </div>
    </div>

    <div class="log-table">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="ID"> </el-table-column>
        <el-table-column prop="deviceId" label="设备ID"> </el-table-column>
        <el-table-column prop="deviceName" label="设备名称"> </el-table-column>
        <el-table-column prop="msg" label="消息"> </el-table-column>
        <el-table-column prop="createTime" label="上报时间">
          <template slot-scope="scope">
            <div v-text="new Date(scope.row.createTime).pattern('yyyy-MM-dd HH:mm:ss')">
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="display:flex;justify-content: flex-end;margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchOption.current"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="searchOption.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/util/axios";
export default {
  data() {
    return {
      total:0,
      tableData: [
      ],
      searchOption: {
        deviceId: null,
        deviceName: null,
        //当前页
        current: 1,
        //大小
        size: 5
      }
    }
  },
  methods: {
    resetSearch: function(){
      this.searchOption.deviceName=null;
      this.searchOption.deviceId=null;
    },
    page: function () {
      axios({
        url: '/list',
        method: "GET",
        params: this.searchOption
      }).then((res) => {
        let pageInfo=res.data.data;
        this.total = pageInfo.total;
        this.tableData=pageInfo.list;
      })
    },
    //size改变的回调
    handleSizeChange: function (size) {
      this.searchOption.size = size;
      this.page();
    },
    //current改变的回调
    handleCurrentChange: function (current) {
      this.searchOption.current = current;
      this.page();
    }
  },
  created:function(){
    this.page();
  }
}
</script>

<style scoped>
@import "index.less";
</style>
